<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp" %>

<script>
function isRepetCode(code){
	$("#code").css({"border":"1px solid black","color":"black"});
	$(".TR_CNYCODE").show(); 
	
	if(code.length){
		var result = false;
		$(".SC").each(function(){
			var _code = $(this).html().toUpperCase();
			if(_code == code.toUpperCase()){
				result = true;
				return;
			}
		});		
		 
		if(result){
			$("#code").css({"border":"1px dashed red","color":"red"});			
			$(".SC").each(function(){
				var _code = $(this).html().toUpperCase();
				if(_code != code.toUpperCase()){
					$("#TR_" + _code).hide();
				}
			});
		}
	}
}

function remove(code){
	alert(code); 
}

function add(){
	$.post("${appPath}/admin/code/country/add.htm",$('#CodeCountryForm').serialize(),function(data){
		if(data){
			var _code = $('#code').val().toUpperCase();
			var _name_ch = $('#name_ch').val();
			var _name_en = $('#name_en').val();
			var _parent = $('#parent_code :selected').text();
			var _max = 0;
			
			$(".CountryCount").each(function(){
				_max = parseInt($(this).html()) > _max ? parseInt($(this).html()) : _max;			
			});
			
			var TD_1 = "<td style='text-align: center;font-weight: 600;'><span class='CountryCount'>"+(_max + 1)+"</span></td>";
			var TD_2 = "<td style='text-align: center;'><span class='SC'>"+_code+"</span></td>";
			var TD_3 = "<td style='text-align: center;'>"+_name_ch+"</td>";
			var TD_4 = "<td style='text-align: center;'>"+_name_en+"</td> ";
			var TD_5 = "<td style='text-align: center;''>"+_parent+"</td>";
			
			var newImg = "<img src='${appPath }/resource/image/round_minus_icon&16_.png' style='vertical-align:middle;'/>";
			var newA = "<a href='javascript:void(0);' onclick='remove(\"" + _code + "\");'>" + newImg + "</a>";
			var TD_6 = "<td style='text-align: center;'>" + newA + "</td>";
			
			var newTR = "<tr class='trContent TR_CNYCODE' id='TR_"+_code+"'>" + TD_1 + TD_2 + TD_3 + TD_4 + TD_5 + TD_6 + "</tr>";
			$("#CODELIST").append(newTR);
			
			document.getElementById("CodeCountryForm").reset();
		}
	});	
}
</script>


<div id="page">
	<div id="page-bgtop">
		<div id="page-bgbtm">
			<div id="content">
				<div class="post">
					<h2 class="title inner">國別代碼</h2>
					
					<div style="clear: both;">&nbsp;</div>
					<div class="entry">
						<table style="width:800px;border:1px solid #D2D9E7;">						
							<tr class="trHeader">
								<td style="width:05%;text-align: center;">&nbsp;</td>
								<td style="width:10%;text-align: center;font-weight: 600;">簡碼</td>
								<td style="width:30%;text-align: center;font-weight: 600;">中文名稱</td>
								<td style="width:30%;text-align: center;font-weight: 600;">英文名稱</td> 
								<td style="width:20%;text-align: center;font-weight: 600;">所屬地區</td>
								<td style="width:05%;text-align: center;font-weight: 600;">動作</td>
							</tr>
							
							<form:form modelAttribute="CodeCountryForm">
								<tr class="trContent">
									<td style="text-align: center;">&nbsp;</td>
									<td style="text-align: center;">
										<form:input maxlength="2" cssStyle="width:40px;" path="code" onkeyup="isRepetCode(this.value);"/>
									</td>
									<td style="text-align: center;">
										<form:input cssStyle="width:200px;" path="name_ch"/>
									</td>
									<td style="text-align: center;">
										<form:input cssStyle="width:200px;" path="name_en"/>
									</td>
									<td style="text-align: center;">
										<form:select path="parent_code">
											<form:option value="A1" label="中南美地區" />
											<form:option value="A2" label="亞太地區" />
											<form:option value="A3" label="北美地區" />
											<form:option value="A4" label="歐洲地區" />
											<form:option value="A5" label="西亞地區" />
											<form:option value="A6" label="非洲地區" />
										</form:select>
									</td>
									<td style="text-align: center;">
										<a href="javascript:void(0);" onclick="add();">
											<img src="${appPath }/resource/image/round_plus_icon&16.png" style="vertical-align:middle;" border="0"/>
										</a>
									</td>
								</tr>
							</form:form>
									
							<tbody id="CODELIST">
								<c:forEach items="${CodeCountry }" var="country" varStatus="s">						
									<tr class="trContent TR_CNYCODE" id="TR_${country.code}">
										<td style="text-align: center;font-weight: 600;"><span class="CountryCount">${s.count }</span></td>
										<td style="text-align: center;"><span class="SC">${country.code}</span></td>
										<td style="text-align: center;">${country.name_ch}</td>
										<td style="text-align: center;">${country.name_en}</td> 
										<td style="text-align: center;">${country.parent.name_ch}</td>
										<td style="text-align: center;">
											<a href="javascript:void(0);" onclick="remove('${country.code}');">
												<img src="${appPath }/resource/image/round_minus_icon&16_.png" style="vertical-align:middle;"/>
											</a>
										</td>
									</tr>
								</c:forEach>
							</tbody>
						</table>
					
					</div>
				</div>
				<div style="clear: both;">&nbsp;</div>
			</div>
			
			<%@ include file="/WEB-INF/jsp/common/submenu01.jsp" %>			
			<div style="clear: both;">&nbsp;</div>
		</div>
	</div>
</div>
<!-- end #page -->